{% extends 'main_frame.html' %}

{% block content %}
{% include "search.html" %}
<table class="layui-hide" id="LAY_table" lay-filter="LAY_table"></table>
<script type="text/html" id="LAY_bar">
    <a class="layui-btn layui-btn-xs" lay-event="view" title="">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" title="">删除</a>
</script>
<div class="layui-bar-buttons">
    <span id="add_admin">添加</span>
</div>
{% endblock %}


{% block js %}
<script>

    var cols=[[
        {type: 'numbers',title: '序号',width: 60},
        {field:'adminId',title: 'id',width: 150},
        {field:'userName',title: '名称',width: 150},
        {field:'phone',title: '手机号',width: 150},
        {field:'email',title: '邮箱',width: 150},
        {field:'roleId',title: '角色',width: 150},
        {field:'loginNum',title: '登录次数',width: 150},
        {field:'lastLogin',title: '最后登录时间',width: 150},
        {field:'createTime',title: '创建时间',width: 150},
        {field:'creator',title: '创建人',width: 150},
        {field:'btns',title: '操作',align: 'center',toolbar: '#LAY_bar',event:'click',fixed: 'right',width:160}
    ]]

    //监听工具栏
    layui.table.on('tool(LAY_table)', function(obj) {
        var data = obj.data;
        switch(obj.event){
            //查看
            case 'view' :
                Methods.view(data);
                break;
            //修改
            case 'edit' :
                Methods.info(data);
                break;
            //删除
            case 'delete' :
                Methods.delete(data);
                break;

            default:
                break;
        }
    });
    //方法集合
    var Methods={
        render:function(where){
            layui.table.render({
                elem: '#LAY_table',
                method:'POST',
                contentType:'application/json',
                url:API.admin.list,
                where:where,
                cols: cols,
                id: 'LAY_table',
                page: true,
                limits: [10, 15, 20, 30, 40, 50],
                loading: true,
                height: FX.getWinHeight(74),
                skin: '', //行边框风格
                even: true, //开启隔行背景
                size: 'big', //小尺寸的表格
                done:function(){

                }
            });
        },
        view:function(data){
            layer.open({
                type: 1,
                title:'信息',
                btn: ['关闭'],
                area:['640px','400px'],
                shadeClose:true,
                anim:5,
                content:function(){
                    return FX.getView({
                        '管理员名称':data.userName,
                        '邮箱':data.email,
                        '手机号':data.phone,
                        '角色':data.roleId,
                        '登录次数':data.loginNum,
                        '最后登录时间 ':data.lastLogin,
                        '创建时间':data.createTime,
                        '创建人':data.creator
                    })
                }(),
                yes:function(index, layero){
                    layer.close(index);
                },
                end:function(){

                },
                success:function(layero,index){

                }
            });
        },
        info:function(obj){
            FX.ajax({
                url:API.admin.info + obj.adminId,
                success:function(res){
                    if(res.code==0){
                        Methods.edit(res.data)
                    }
                }
            })
        },
        edit:function(obj){
            layer.open({
                type: 1,
                title:'信息',
                btn: ['保存'],
                area:['640px','400px'],
                shadeClose:true,
                anim:5,
                content:function(){
                    return renderForm([
                        { title:{name:'管理员ID'},content:[{type:'hidden',name:'adminId',disabled:true,value:obj.adminId}]},
                        { title:{name:'名称'}, content:[{type:'input',name:'userName',verify:true,value:obj.userName}]},
                        { title:{name:'密码'}, content:[{type:'password',name:'password',verify:true,value:obj.password}]},
                        { title:{name:'手机号'}, content:[{type:'input',name:'phone',verify:true,value:obj.phone}]},
                        { title:{name:'邮箱'}, content:[{type:'input',name:'email',value:obj.email}]},
                        { title:{name:'角色'}, content:[{type:'input',name:'roleId',value:obj.roleId}]},
                        { title:{name:'登录次数'}, content:[{type:'input',name:'loginNum',value:obj.loginNum}]},
                        { title:{name:'最后登录时间'}, content:[{type:'date',name:'lastLogin',value:obj.lastLogin}]},
                        { title:{name:'创建时间'}, content:[{type:'date',name:'createTime',value:obj.createTime}]},
                        { title:{name:'创建人'}, content:[{type:'input',name:'creator',value:obj.creator}]}
                    ])

                }(),
                yes:function(index, layero){
                    layui.form.on('submit(lay-submit)', function(obj){
                        FX.ajax({
                            url:API.admin.edit,
                            type:'post',
                            data:obj.field,
                            success:function(res){
                                FX.success('修改成功');
                                layer.close(index);
                            }
                        })
                        return false;
                    });
                    $("#lay_submit_btn").click();
                },
                end:function(){

                },
                success:function(layero,index){
                    layui.form.render('select');
                    FX.initDate();
                }
            })
        },
        add:function(data){
            layer.open({
                type: 1,
                title:'信息',
                btn: ['保存'],
                area:['640px','400px'],
                shadeClose:true,
                anim:5,
                content:function(){
                    return renderForm([
                        { title:{name:'用户名'}, content:[{type:'input',name:'userName',verify:true}]},
                        { title:{name:'密码'}, content:[{type:'password',name:'password',verify:true}]},
                        { title:{name:'手机号'}, content:[{type:'input',name:'phone',verify:true}]},
                        { title:{name:'邮箱'}, content:[{type:'input',name:'email'}]},
                        { title:{name:'角色'}, content:[{type:'input',name:'roleId'}]}
                    ])

                }(),
                yes:function(index, layero){
                    layui.form.on('submit(lay-submit)', function(obj){
                        FX.ajax({
                            url:API.admin.add,
                            type:'post',
                            data:obj.field,
                            success:function(res){
                                FX.success('添加成功');
                                layer.close(index);
                            }
                        })
                        return false;
                    });
                    $("#lay_submit_btn").click();
                },
                end:function(){

                },
                success:function(layero,index){
                    layui.form.render('select');
                    FX.initDate();
                }
            });
        },
        delete:function(obj){
            layer.confirm('是否删除',function(index){
                layer.close(index);
                FX.ajax({
                    url:API.admin.delete + obj.adminId,
                    success:function(res){
                        if(res.code==0){
                            FX.success('删除成功');
                        }
                    }
                })

            })
        }
    }
    $("#add_admin").click(function(){
        Methods.add();
    })


    Methods.render();
    FX.getSearch(WHERE.adminList,Methods.render);

</script>
{% endblock %}